<template>
  <div class="index-home" id="home">
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="notice-row">
          <div class="notice-title">公告栏</div>
          <el-table
            :data="tableData"
            style="width: 100%"
            max-height="420"
            @cell-click="cellClick"
            :row-class-name="tableRowClassName"
          >
            <el-table-column prop="date" label="标题"> </el-table-column>
            <el-table-column prop="name" label="发布人"> </el-table-column>
            <el-table-column prop="address" label="最新发布时间">
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <div class="pagination">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage3"
              :page-sizes="[100, 200, 300, 400]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400"
            >
            </el-pagination>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="notice-row-right">
          <img src="@/assets/not-data/not-data.png" alt="" />
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="notice-row2">
          <img src="@/assets/not-data/not-data.png" alt="" />
        </div>
      </el-col>
    </el-row>

    <!-- 发布公告 -->
    <release-notice ref="releaseNoticeRef" />
  </div>
</template>
<script>
import ReleaseNotice from './index/relase-notice.vue'
export default {
  name: "index",
  components:{
    ReleaseNotice
  },
  data() {
    return {
      tableData: [
        {
          date: "XXXX各部门年度计划的提报",
          name: "李秘书",
          address: "2020-06-24  10:22",
        },
        {
          date: "XXXX各部门年度计划的提报",
          name: "李秘书",
          address: "2020-06-24  10:22",
        },
        {
          date: "XXXX各部门年度计划的提报",
          name: "李秘书",
          address: "2020-06-24  10:22",
        },
        {
          date: "XXXX各部门年度计划的提报",
          name: "李秘书",
          address: "2020-06-24  10:22",
        },
        {
          date: "XXXX各部门年度计划的提报",
          name: "李秘书",
          address: "2020-06-24  10:22",
        },
        {
          date: "XXXX各部门年度计划的提报",
          name: "李秘书",
          address: "2020-06-24  10:22",
        },
        {
          date: "XXXX各部门年度计划的提报",
          name: "李秘书",
          address: "2020-06-24  10:22",
        },
      ],
      currentPage3: 2, //分页
    };
  },
  methods: {
    tableRowClassName({ rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    /**
     * 点击表格数据
     */
    cellClick() {
      this.$refs.releaseNoticeRef.detailVisible = true
    },
  },
};
</script>
<style lang="less" scoped>
.index-home {
  background-color: #f2f3f6;
  min-height: 100%;
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  .notice-row {
    background-color: #fff;
    height: 530px;
    border-radius: 10px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    .notice-title {
      font-size: 20px;
      color: #333333;
    }
    .pagination {
      position: absolute;
      bottom: 20px;
      right: 20px;
    }
  }
  .notice-row-right {
    background-color: #fff;
    height: 530px;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    line-height: 530px;
    & > img {
      width: 40%;
      height: 50%;
    }
  }
  .notice-row2 {
    background-color: #fff;
    margin-top: 20px;
    height: 530px;
    border-radius: 10px;
    text-align: center;
    line-height: 530px;
    & > img {
      width: 20%;
      height: 50%;
    }
  }
}
</style>